<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('课题批阅')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-apply-edit" th:object="${sciHorizontalApply}">
        <input name="id" id="state" th:field="*{state}" type="hidden">
        <input name="id" id="ktid" th:field="*{id}" type="hidden">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">申请人：</label>
                <div class="col-sm-8">
               <input  readonly th:field="*{userName}" class="form-control" type="text" >
<!--                    <select name="userId" class="form-control m-b" readonly >-->
<!--                        <option th:each="user : ${sysUsers1}" th:text="${user.userName}" th:value="${user.userId}" th:selected="${ user.userId == sciHorizontalApply.userId}"></option>-->
<!--                    </select>-->
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">课题类型：</label>
                <div class="col-sm-8">

                    <select  readonly class="form-control" th:with="type=${@dict.getType('sci_top_type')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{topType}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">课题名称：</label>
                <div class="col-sm-8">
                    <input  readonly th:field="*{topName}" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">项目金额：</label>
                <div class="col-sm-8">
                    <input readonly th:field="*{amount}" class="form-control" type="text" required>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">签订日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input  readonly th:field="*{signingData}" th:value="${#dates.format(signingData, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">合同有效日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input  readonly th:field="*{validityDate}" th:value="${#dates.format(validityDate, 'yyyy-MM-dd - yyyy-MM-dd')}" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">第一负责人：</label>
                <div class="col-sm-8">

                    <!--                        <input name="firstPersonId" th:field="*{firstPersonId}" class="form-control" type="text" required>-->
                    <select name="firstPersonId" class="form-control m-b" >
                        <option th:each="user : ${sysUsers1}" th:text="${user.userName}" th:value="${user.userId}" th:selected="${ #strings.toString(user.userId) == sciHorizontalApply.firstPersonId}"></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">第二负责人：</label>
                <div class="col-sm-8">
                    <!--                        <input name="secondPersonTask" th:field="*{secondPersonTask}" class="form-control" type="text" required>-->
                    <select name="secondPersonId" class="form-control m-b" >
                        <option th:each="user : ${sysUsers1}" th:text="${user.userName}" th:value="${user.userId}" th:selected="${ #strings.toString(user.userId) == sciHorizontalApply.secondPersonId}" ></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">第三负责人：</label>
                <div class="col-sm-8">
                    <!--                        <input name="thirdPersonId" th:field="*{thirdPersonId}" class="form-control" type="text" required>-->
                    <select  class="form-control m-b" >
                        <option th:each="user : ${sysUsers1}" th:text="${user.userName}" th:value="${user.userId}" th:selected="${ #strings.toString(user.userId) == sciHorizontalApply.thirdPersonId}"  ></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">第四负责人：</label>
                <div class="col-sm-8">
                    <!--                        <input name="fourthPersonId" th:field="*{fourthPersonId}" class="form-control" type="text" required>-->
                    <select  class="form-control m-b" >
                        <option th:each="user : ${sysUsers1}" th:text="${user.userName}" th:value="${user.userId}" th:selected="${ #strings.toString(user.userId) == sciHorizontalApply.fourthPersonId}"  ></option>
                    </select>
                </div>
            </div>
        </div>


        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">合同：</label>
                <div class="col-sm-8">
                    <input th:field="*{contract}" hidden id="contract" type="text" >
                    <button class="form-control" onclick="chakan()" >查看</button>

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">备案表：</label>
                <div class="col-sm-8">
                    <input th:field="*{filing}" hidden id="filing" type="text" >
                    <button class="form-control" onclick="beian()"  >查看</button>

                </div>
            </div>
        </div>
        </div>
        <h4 class="form-header h4" id="msg">退回原因</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group" style="display:none;" id="tdiv1">
                    <label class="col-xs-2 control-label">批注：</label>
                    <div class="col-xs-10">
                        <textarea name="remark" required maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group" style="display:none;" id="tdiv2">
                <table id='bootstrap-table'></table>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" id="btn1" style="display:none;" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>通 过</button>&nbsp;
        <button type="button" id="btn2" style="display:none;" class="btn btn-sm btn-danger" onclick="submitHandlerBH()"><i class="fa fa-reply-all"></i>驳 回</button>
        <button type="button" id="btn3" style="display:none;" class="btn btn-sm btn-warning" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: select2-js" />
<script type="text/javascript">
    function chakan(){
        var c = $("#contract").val();
        $.modal.openTab("查看合同" ,c );
        //window.location = "http://localhost:8081/profile/upload/2024/08/20/GXSZ086812_20240820090353A001.pdf";
    }
    function beian(){
        var c = $("#filing").val();
        $.modal.openTab("查看备案表" ,c );

    }
    $(function(){
        var kid = $("#ktid").val();
        var options = {
            url: prefix + "/bhyy/"+kid,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination:false,

            columns: [

                {
                    field : 'createTime',
                    title : '批阅时间',
                    width: 200

                } ,
                {
                    field : 'uname',
                    title : '批阅人',
                    width: 100
                },
                {
                    field : 'concate',
                    title : '内容',
                    width: 500
                },
                {
                    field : 'state',
                    title : '审核状态',
                    width: 100
                } ]
        };

        $.table.init(options);




        var a =$("#state").val();
        if(a==2){
            $("#btn3").show();
            $("#msg").text("批阅记录");
            $("#tdiv2").show();

        }else{
            $("#tdiv1").show();
            $("#btn1").show();
            $("#btn2").show();
        }
        <!-- laydate示例 -->
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-4',
                range: true
            });
            var startDate = laydate.render({
                elem: '#laydate-startTime',
                max: $('#laydate-endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#laydate-endTime',
                min: $('#laydate-startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });
</script>
<script th:inline="javascript">
    var prefix = ctx + "system/apply";
    $("#form-apply-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {

        //if ($.validate.form()) {
            $.operate.saveTab(prefix + "/hxPass", {"id":$("#ktid").val()});
       // }
    }
    function submitHandlerBH() {

        if ($.validate.form()) {
        $.operate.saveTab(prefix + "/hxBh",   $('#form-apply-edit').serialize());
         }
    }

    $("input[name='signingData']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });



    $(".file-upload").each(function (i) {
        var val = $("input[name='" + this.id + "']").val()
        $(this).fileinput({
            'uploadUrl': ctx + 'common/upload',
            initialPreviewAsData: true,
            initialPreview: [val],
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
        $(this).fileinput('_initFileActions');
    });
</script>
</body>
</html>